{% extends  "main.html" %}
{% block content %}
    {% load custom %}
    {% load staticfiles %}
    {% load paginate_tags %}
    {#首先必须通过load模板标签载入分页标签#}
    {% paginate object_list 8 %}
    {#把文章列表传给paginate函数，每页分12个，context上下文则自动被传入，无需显示指定#}
    <style>
        #pic > div {
            margin-bottom: 40px;
            vertical-align: middle;
            text-align: center;
        }

        #pic > div > div {
            border: 1px solid #E5E5E5;
            height: 200px;
            vertical-align: middle;
            text-align: center;
            padding: 0px;
        }

        #pic > div > div > a {
            line-height: 200px;
        }

        #pic img {
            padding: 5px;
            margin-bottom: 5px;

        }

        #pic a {
            color: #666666;
        }

        .condition {
            margin: 0 10px;
        }

        .condition div {
            margin-bottom: 10px;
        }

        .condition p {
            float: left;
        }

        .condition li {
            float: left;
            list-style: none;
            margin: 0px 5px 5px 5px;
        }

        .condition a {
            font-size: 14px;
            color: #000000;
            padding: 3px;
            border: 1px solid #FFFFFF;
        }

        .condition a:hover {
            color: #2EE679;
            text-decoration: none;
            border: 1px solid #2EE679;
        }

        .condition .pick {
            text-decoration: none;
            color: #2EE679;
            border: 1px solid #2EE679;
        }
    </style>
    <script>
        $(document).ready(function () {
            function liAddClass(select,value) {
                if(value!='' & value!='全部'){
                    $(select).each(function () {
                        if ($(this).text()==value){
                            $(this).addClass('pick');
                        }else{
                            $(this).removeClass('pick');
                        }
                    })
                }
            }
            var type="{{ type }}";
            var search_input='{{ input }}';
            var click_input='{{ click_input }}';
            var file_format='{{ format }}';
            var classify=$('.classify ul li a');

            $('.classify ul li a:first').addClass('pick');
            $('.format ul li a:first').addClass('pick');
            liAddClass('.classify ul li a',click_input);
            liAddClass('.format ul li a',file_format);

            //------------------全部素材
            $('#select_type option[value='+type+']').attr('selected','selected');
            if (search_input!=''){
                $('#inputstr').val(search_input);
            }

    })
    </script>
    <form action="/ml/hd_pictures/" method="post">
        <div class="container">
            <div class="row col-md-12 col-sm-12 col-xs-12 search" style="margin: 10px;">
                <div class="input-group col-md-12 col-sm-12 col-xs-12">
                    <div class="col-md-10 col-sm-8 col-xs-6" style="padding: 0px;">
                        <input type="text" id="inputstr" class="form-control" placeholder="請輸入關鍵字" name="input"/>
                    </div>
                    <div class=" col-md-1 col-sm-2 col-xs-3" style="border: none;background: none;padding: 0px;">
                        <select class="form-control col-md-12" type="select"
                                style="padding: 3px 0; border-left: none; border-right: none;" name="type" id="select_type">
                            <option value="全部素材">全部素材</option>
                            <option value="高清圖片">高清圖片</option>
                            <option value="logo">logo</option>
                            <option value="矢量圖標">矢量圖標</option>
                            <option value="PSD素材">PSD素材</option>
                            <option value="3D模型">3D模型</option>
                        </select>
                    </div>
                    <span class="input-group-btn col-md-1 col-sm-2 col-xs-3" style="padding: 0px;">
                        <button class="btn btn-default" type="submit" style="background-color: #617C8D;padding: 3px 12px;color: #FFFFFF;font-size: 14px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
                            <span>
                                <img src="{% static 'img/search_icon.png' %}" style="height: 26px;"/>
                            </span>&nbsp;搜索
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </form>

    <div class="container">
        <div class="row col-md-12 col-sm-12 col-xs-12 condition">
            <div class="classify col-md-12 col-sm-12 col-xs-12">
                <p><strong>分類：</strong></p>
                <ul>
                    <li><a href="?type={{ type }}&input={{ input }}&click_input=全部" >全部</a></li>
                    {% for i in file_type %}
                        <li><a href="?type={{ type }}&input={{ input }}&click_input={{ i }}" >{{ i }}</a></li>
                    {% endfor %}
                </ul>
            </div>
            <div class="format col-md-12 col-sm-12 col-xs-12">
                <p><strong>格式：</strong></p>
                <ul>
                    <li ><a href="?type={{ type }}&input={{ input }}&click_input={{ click_input }}&format=全部" >全部</a></li>
                    {% for i in file_format %}
                        <li ><a href="?type={{ type }}&input={{ input }}&click_input={{ click_input }}&format={{ i }}">{{ i }}</a></li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row col-md-12 col-sm-12 col-xs-12" style="margin: 10px;">
            <div id="pic" class="col-md-12 col-sm-12 col-xs-12" style="text-align: center;">
                {% for contact in article_list %}
                    <div class="col-md-3 col-sm-3 col-xs-4" style="height: 200px;">
                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <a href="/ml/download_msg/?type={{ type }}&id={{ contact.id }}">
                                <img src="http://10.129.8.19:8080/{{ contact.path }}" style="max-width: 100%;max-height: 100%;"/>
                            </a>
                        </div>
                        <a href="/ml/download_msg/?type={{ type }}&id={{ contact.id }}">{{ contact.name|filter|last }}
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% include 'pagination.html' %}
    <div id="biuuu_city" class="container" style="text-align: center;"></div>

{% endblock %}